<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>后台登录</title>
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <script src="static/jquery/jquery.js"></script>
    <script src="static/layui/layui.js"></script>
    <style>
        .main {
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            background: url("static/images/login-bg.jpg") no-repeat center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .form {
            width: 300px;
            background-color: rgba(255, 255, 255, .4);
            border-radius: 20px;
            padding: 10px 20px;
        }

        .form h3 {
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="form">
        <h3>机蜂博客管理员后台登录</h3>
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-username"></i>
                    </div>
                    <input type="text" class="layui-input" name="username" placeholder="用户名" lay-verify="required"
                           lay-reqtext="请填写用户名" autocomplete="off" lay-affix="clear">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-password"></i>
                    </div>
                    <input type="password" class="layui-input" name="password" placeholder="密码" lay-verify="required"
                           lay-reqtext="请填写密码" lay-affix="eye">
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="loginFilter">登录</button>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    layui.use(function () {
        /*加载表单模块，不加载该模块只有样式效果，没有js的如验证和弹出的效果*/
        const form = layui.form;
        /*监听表单的提交*/
        form.on('submit(loginFilter)', function (data) {
            console.log(data.field)
            $.ajax({
                url: "login",
                data: data.field,
                method: "post",
                dataType: "json",
                success(res) {
                    if (res.code === 200) {
                        layer.msg("登录成功", {icon: 1});
                        location.replace("home")
                    } else {
                        layer.alert(res.msg, {icon: 2});
                    }
                },
                error(e) {
                    console.log(e);
                    layer.alert("服务器睡着了...", {icon: 2})
                }
            });
            /*最后的return false用来阻止表单自身的提交行为*/
            return false;
        });
    });
</script>
</html>
